<template>
	<view class="Settings">
		<statusBar />
		<!-- 设置 -->
		<view class="nav">
			<image @tap="leftIndex" src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置-店铺设置</view>
		</view>

		<view class="stores">
			<!-- 基本信息，营业信息 -->
			<u-tabs :bar-height="10" active-color="#FDC345" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<!-- 基本信息 -->
			<view v-if="current == 0">
				<view class="Shop_name">
					<view @tap="storename(dataList.name)">
						<view>店铺名称</view>
						<view>
							<view>{{ dataList.name }}</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view>
					<!-- <view @tap="category">
						<view>经营品类</view>
						<view>
							<view>美食-中式菜肴-川菜</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view> -->
					<!-- 上传照片 -->
					<view @tap="category">
						<view>门店头像</view>
						<!-- view>
							<view></view> -->
						<view><image :src="dataList.icon" mode=""></image></view>
						<!-- </view> -->
					</view>
				</view>
				<view class="Shop_name1">
					<view>
						<view>营业状态</view>
						<view>
							<view v-if="this.dataList.storeOpen == 1">开业中</view>
							<view v-else @tap="Business">停业中</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view>
					<!-- <view class="announcement" @tap="announcement(dataList.notice)">
						<view>门店公告</view>
						<view>
							<view>{{ dataList.notice }}</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view> -->
					<view class="announcement" @tap="phone(dataList.storeTel)">
						<view>店铺电话</view>
						<view>
							<view>{{ dataList.storeTel }}</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view>

					<!-- 联系人 -->
					<view class="announcement" @tap="contact">
						<view>联系人</view>
						<view>
							<view>{{ dataList.storeLinkMan }}</view>
							<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view>

					<!-- 店铺经纬度 -->
					<view class="longitude">
						<view>店铺经纬度</view>
						<view>
							<view>{{ dataList.lng }}</view>
							<view>{{ dataList.lat }}</view>
						</view>
					</view>
					<!-- 店铺地址 -->
					<view class="announcement">
						<view>店铺地址</view>
						<view>
							<view><u-input v-model="dataList.address" /></view>
							<view @tap="addTipe"><image src="../../static/setup/jiantou2.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 营业信息 -->
			<view class="information" v-if="current == 1">
				<view class="amTime" @tap="hours">
					<view>营业时间</view>
					<view>
						<view v-if="dataList.timeType == 1" class="timeClass" v-for="(v, i) in dataList.timeArr" :key="i">
							<view>{{ v.startTime }}-{{ v.endTime }}</view>
						</view>

						<view v-else><view>全天营业</view></view>
					</view>
					<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
				</view>
				<!-- 门店公告 -->
				<view class="annoStore" @tap="announcement(dataList.notice)">
					<view>门店公告</view>
					<view>
						<view>1111</view>
						<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
					</view>
				</view>

				<!-- 主营菜品 -->
				<view class="annoStore">
					<view>主营菜品</view>
					<view>
						<view><input style="text-align: right;" type="text" value="" placeholder="请输入主营菜品" /></view>
					</view>
				</view>
				<!-- 人均消费 -->
				<view class="annoStore">
					<view>人均消费</view>
					<view>
						<view><input style="text-align: right;" type="text" value="" placeholder="请输入人均消费" /></view>
						<text>元</text>
					</view>
				</view>

				<!-- 商家环境 -->
				<view class="annoStore">
					<view>商家环境</view>
					<u-upload :action="action" :before-upload="beforeUpload"></u-upload>
				</view>
			</view>
			<!-- 商品安全档案 -->
			<view class="information" v-if="current == 2">
				<view class="annoStore">
					<view>商品安全档案</view>
					<u-upload :action="action" :before-upload="beforeUpload"></u-upload>
				</view>
				<view class="annoStore">
					<view>营业执照</view>
					<u-upload :action="action" :before-upload="beforeUpload"></u-upload>
				</view>
			</view>
		</view>
		<view class="Login">保存</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			dataList: [],
			list: [
				{
					name: '基本信息'
				},
				{
					name: '营业信息'
				},
				{
					name: '资质认证'
				}
			],
			current: 0,
			// 图片数组
			ImageArray:[],
			action: 'http://www.example.com/upload'
		};
	},
	components: {
		statusBar
	},

	onShow() {
		this.hestore();
	},
	methods: {
		beforeUpload(index, list) {
			this.ImageArray = list;
			console.log(this.ImageArray, 1111);
		},
		change(index) {
			this.current = index;
		},
		hestore() {
			// 接口
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/store-basic', 'GET', {}).then(res => {
				if (res.data.code == 1) {
					this.dataList = res.data.data;
					console.log(this.dataList, 76666);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.dataList = JSON.parse(res.data).data;
				} catch (e) {
					this.dataList = res.data.data;
				}
			});
		},
		// 跳转地图
		addTipe() {
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					const latitude = res.latitude;
					const longitude = res.longitude;
					console.log(latitude, 1111);
					uni.openLocation({
						latitude: latitude,
						longitude: longitude,
						success: function() {
							console.log('success');
						}
					});
				}
			});
		},
		leftIndex() {
			uni.navigateBack({
				delta: 2
			});
		},
		storename(num) {
			uni.navigateTo({
				url: '/pages/Setup/Storename?name=' + num
			});
		},
		// 经营品种
		category() {
			uni.navigateTo({
				url: '/pages/Setup/category'
			});
		},
		// 营业状态
		Business() {
			uni.navigateTo({
				url: '/pages/Setup/Business'
			});
		},
		// 门店公告
		announcement(num) {
			uni.navigateTo({
				url: '/pages/Setup/announcement?notice=' + num
			});
		},
		// 电话
		phone(num) {
			uni.navigateTo({
				url: '/pages/Setup/phone?tel=' + num
			});
		},
		// 联系人
		contact() {
			uni.navigateTo({
				url: '/pages/Setup/contact'
			});
		},
		// 营业时间
		hours() {
			uni.navigateTo({
				url: '/pages/Setup/hours'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.Settings {
	/* #ifdef  H5 */
	.nav {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	/*  #endif*/
	/* #ifdef  APP-PLUS||MP-WEIXIN */
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	/*  #endif*/
	.stores {
		padding-top: 78upx;
	}
	// 门店设置
	.Shop_name {
		background: $bg1-color;
		& > view:nth-child(1) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 67upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					display: flex;
				}
				& > view:nth-child(2) image {
					width: 44upx;
					height: 44upx;
					display: flex;
				}
			}
		}

		// & > view:nth-child(2) {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// 	margin: 0 auto;
		// 	width: 93%;
		// 	border-bottom: 1upx solid #edf0fa;
		// 	padding-bottom: 32upx;
		// 	padding-top: 36upx;
		// 	& > view:nth-child(1) {
		// 		font-size: 32upx;
		// 		font-family: Source Han Sans CN;
		// 		font-weight: 400;
		// 		color: $bg2-color;
		// 	}
		// 	& > view:nth-child(2) {
		// 		display: flex;
		// 		align-items: center;
		// 		& > view:nth-child(1) {
		// 			font-size: 30upx;
		// 			font-family: Source Han Sans CN;
		// 			font-weight: 400;
		// 			color: $bg5-color;
		// 			display: flex;
		// 		}
		// 		& > view:nth-child(2) image {
		// 			width: 44upx;
		// 			height: 44upx;
		// 			display: flex;
		// 		}
		// 	}
		// }

		& > view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
			& > view:nth-child(2) image {
				width: 96upx;
				height: 96upx;
				display: flex;
			}
		}
	}
	.Shop_name1 {
		background: $bg1-color;
		margin-top: 30upx;
		& > view:nth-child(1) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg10-color;
					display: flex;
				}
				& > view:nth-child(2) image {
					width: 44upx;
					height: 44upx;
					display: flex;
				}
			}
		}
		.announcement {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				width: 30%;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					display: flex;
				}
				& > view:nth-child(2) image {
					width: 44upx;
					height: 44upx;
					display: flex;
				}
			}
		}
		// 经纬度
		.longitude {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				width: 30%;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: center;
				& > view {
					background-color: #f5f7fa;
					border-color: #e4e7ed;
					color: #c0c4cc;
					width: 30%;
					height: 80upx;
					border-radius: 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 30upx;
				}
			}
		}
	}
	// 营业信息
	.information {
		background: #ffffff;
		.amTime {
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				width: 20%;
			}
			& > view:nth-child(2) {
				flex-wrap: wrap;
				display: flex;
				width: 80%;
				.timeClass {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					display: flex;
					padding-left: 50upx;
				}
			}
			& > view:nth-child(3) {
				image {
					width: 44upx;
					height: 44upx;
					display: flex;
				}
			}
		}
		.annoStore {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 93%;
			border-bottom: 1upx solid #edf0fa;
			padding-bottom: 32upx;
			padding-top: 36upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				width: 30%;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					display: flex;
				}
				& > view:nth-child(2) image {
					width: 44upx;
					height: 44upx;
					display: flex;
				}
			}
		}
	}

	.Login {
		width: 93%;
		height: 112upx;
		margin: 0 auto;
		background: rgba(53, 57, 76, 1);
		border-radius: 56upx;
		font-size: 34upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg1-color;
		margin-top: 73upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 30upx;
		left: 0;
		right: 0;
	}
}
</style>
